import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import { useI18n } from '/@/hooks/web/useI18n';

const { t } = useI18n();

export const columns: BasicColumn[] = [
  {
    title: t('routes.table.menuManagement.menuName'),
    dataIndex: 'menuName',
    width: 200,
    align: 'left',
  },
  {
    title: t('routes.table.menuManagement.menuIcon'),
    dataIndex: 'icon',
    width: 50,
    customRender: ({ record }) => {
      return h(Icon, { icon: record.icon });
    },
  },
  {
    title: t('routes.table.menuManagement.permission'),
    dataIndex: 'permission',
    width: 180,
  },
  {
    title: t('routes.table.menuManagement.component'),
    dataIndex: 'component',
  },
  {
    title: t('routes.table.menuManagement.sort'),
    dataIndex: 'orderNo',
    width: 50,
  },
  {
    title: t('routes.table.menuManagement.status'),
    dataIndex: 'status',
    width: 80,
    customRender: ({ record }) => {
      const status = record.status;
      const enable = ~~status === 1;
      const color = enable ? 'green' : 'red';
      const text = enable
        ? t('routes.table.menuManagement.enable')
        : t('routes.table.menuManagement.disable');
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: t('routes.table.menuManagement.createTime'),
    dataIndex: 'creationTime',
    width: 180,
    slots: { customRender: 'creationTime' },
  },
];

const isDir = (type: number) => type === 0;
const isMenu = (type: number) => type === 1;
const isButton = (type: number) => type === 2;

export const searchFormSchema: FormSchema[] = [
  {
    field: 'menuName',
    label: t('routes.table.menuManagement.menuName'),
    defaultValue: '',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'status',
    label: t('routes.table.menuManagement.status'),
    component: 'Select',
    defaultValue: -1,
    componentProps: {
      options: [
        { label: t('routes.table.menuManagement.all'), value: -1 },
        { label: t('routes.table.menuManagement.enable'), value: 0 },
        { label: t('routes.table.menuManagement.disable'), value: 1 },
      ],
      allowClear: false,
    },
    colProps: { span: 8 },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'type',
    label: t('routes.table.menuManagement.menuType'),
    component: 'RadioButtonGroup',
    defaultValue: 0,
    componentProps: {
      options: [
        { label: t('routes.table.menuManagement.directory'), value: 0 },
        { label: t('routes.table.menuManagement.menu'), value: 1 },
        { label: t('routes.table.menuManagement.button'), value: 2 },
      ],
    },
    colProps: { lg: 24, md: 24 },
  },
  {
    field: 'menuName',
    label: t('routes.table.menuManagement.menuName'),
    component: 'Input',
    required: true,
  },

  {
    field: 'parentMenu',
    label: t('routes.table.menuManagement.parentMenu'),
    component: 'TreeSelect',
    // required: ({ values }) => !isDir(values.type),
    componentProps: {
      replaceFields: {
        children: 'childList',
        title: 'menuName',
        key: 'id',
        value: 'id',
      },
      getPopupContainer: () => document.body,
    },
  },

  {
    field: 'orderNo',
    label: t('routes.table.menuManagement.sort'),
    component: 'InputNumber',
    required: true,
  },
  {
    field: 'icon',
    label: t('routes.table.menuManagement.menuIcon'),
    component: 'IconPicker',
    required: true,
    ifShow: ({ values }) => !isButton(values.type),
  },

  {
    field: 'routePath',
    label: t('routes.table.menuManagement.routerPath'),
    component: 'Input',
    required: true,
    ifShow: ({ values }) => !isButton(values.type),
  },
  {
    field: 'component',
    label: t('routes.table.menuManagement.componentPath'),
    component: 'Input',
    ifShow: ({ values }) => isMenu(values.type),
  },
  {
    field: 'permission',
    label: t('routes.table.menuManagement.permission'),
    component: 'Input',
    ifShow: ({ values }) => !isDir(values.type),
  },
  {
    field: 'status',
    label: t('routes.table.menuManagement.status'),
    component: 'RadioButtonGroup',
    defaultValue: 1,
    componentProps: {
      options: [
        { label: t('routes.table.menuManagement.enable'), value: 1 },
        { label: t('routes.table.menuManagement.disable'), value: 0 },
      ],
    },
  },
  {
    field: 'isExt',
    label: t('routes.table.menuManagement.externalLink'),
    component: 'RadioButtonGroup',
    defaultValue: false,
    componentProps: {
      options: [
        { label: t('routes.table.menuManagement.no'), value: false },
        { label: t('routes.table.menuManagement.yes'), value: true },
      ],
    },
    ifShow: ({ values }) => !isButton(values.type),
  },

  {
    field: 'keepalive',
    label: t('routes.table.menuManagement.cache'),
    component: 'RadioButtonGroup',
    defaultValue: false,
    componentProps: {
      options: [
        { label: t('routes.table.menuManagement.no'), value: false },
        { label: t('routes.table.menuManagement.yes'), value: true },
      ],
    },
    ifShow: ({ values }) => isMenu(values.type),
  },

  {
    field: 'show',
    label: t('routes.table.menuManagement.display'),
    component: 'RadioButtonGroup',
    defaultValue: true,
    componentProps: {
      options: [
        { label: t('routes.table.menuManagement.yes'), value: true },
        { label: t('routes.table.menuManagement.no'), value: false },
      ],
    },
    ifShow: ({ values }) => !isButton(values.type),
  },
];
